<template>
  <div>
    <div class="main-title">
      <img src="/chuneng/img/title-border-1.png" />
      <!-- <div style="text-align: center">
        <svg viewBoxs="0 0 600 500" style="width: 400px">
          <defs>
            <linearGradient
              id="SVGID_1_"
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="0"
              x2="0"
              y2="90"
            >
              <stop offset="0" style="stop-color: #ffffff" />
              <stop offset="0.9" style="stop-color: #6bdbfa" />
              <stop offset="1" style="stop-color: #6bdbfa" />
            </linearGradient>
          </defs>
          <text
            style="fill: url(#SVGID_1_); font-size: 40px; font-weight: bolder"
            text-anchor="middle"
            x="50%"
            y="50%"
          >
            储能健康评估
          </text>
        </svg>
      </div> -->
      <!-- 使用封装的cnsvg组件 -->
      <cn-svg :viewBoxs="'0 0 600 500'" :svgstyle="'width: 600px;'" :textname="'储能健康智能评估模块'"></cn-svg>
      <div
        style="
          position: relative;
          transform: translateY(-20px);
          padding-left: 17%;
        "
      >
        <input
          class="cell-input"
          type="select"
          placeholder="请输入储能装置编号："
          ref="cell-input"
        />
        <div class="time-container" style="font-weight: bolder;">
          <span class="time-part date"></span>
          <span class="time-part time"></span>
        </div>
        <button class="btn-search" @click="init">查询</button>
      </div>
      <!-- 使用封装的cnsearch,并传入点击事件 -->
      <!-- <cn-search :placeholder="'请输入储能装置编号:'" @cnclick="init"></cn-search> -->
    </div>
    <div class="main-content">
      <el-table
        style="background-color: transparent; height: fit-content; background: rgb(47,85,151);"
        :row-class-name="'table-row'"
        :header-row-class-name="'table-header'"
        :header-cell-class-name='"table-header-cell"'
       :data="tableData" :cell-style="cellClassName" :span-method="objectSpanMethod">
        <el-table-column prop="cellgroup" label="电池组编号" width="220">
        </el-table-column>
        <el-table-column prop="健康" label="健康" width="180">
        </el-table-column>
        <el-table-column prop="亚健康" label="亚健康" width="180">
        </el-table-column>
        <el-table-column prop="严重" label="严重" width="180">
        </el-table-column>
        <el-table-column prop="恶劣" label="恶劣" width="180">
        </el-table-column>
        <el-table-column prop="等级" label="等级" width="180">
        </el-table-column>
        <el-table-column prop="kstar" label="k*" width="180"> </el-table-column>
        <el-table-column prop="整体评估结果" label="整体评估结果" width="auto"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import cnSvg from "./cn-svg.vue";
import { mapGetters } from "vuex";
// import cnSearch from "./cn-search.vue";
export default {
  components: { cnSvg },
  computed: {
    ...mapGetters(["cell_group"]),
  },
  watch:{
    // eslint-disable-next-line
    cell_group(val){

      this.init();
    }
  },
  data() {
    return {
      tableData: [],
    };
  },

  methods: {
      /* eslint-disable no-unused-vars */
    cellClassName({ row, column, rowIndex, columnIndex }){
        let styles = {
            backgroundColor: 'transparent',
            border: '0',
            color: 'white',
            textAlign: 'center',
            lineHeight: 1.0,
            fontSize: '25px',
            fontWeight: 700,
            padding: '45px 0'
        }
        if(column.label === '整体评估结果') {
            if (row.整体评估结果 === '健康') {
                styles['color'] = 'green'
            }
            if (row.整体评估结果 === '亚健康') {
                styles['color'] = 'red'

            }
            if (row.整体评估结果 === '严重') {
                styles['color'] = 'red'
            }
            if (row.整体评估结果 === '恶劣') {
                styles['color'] = 'red'
            }
        }
        if(column.label === '等级' || column.label === '电池组编号') {
            if (row.等级 === '健康') {
                 styles['color'] = 'green'
            }
            if (row.等级 === '亚健康') {
                 styles['color'] = 'red'
            }
            if (row.等级 === '严重') {
                styles['color'] = 'red'
            }
            if (row.等级 === '恶劣') {
                styles['color'] = 'red'
            }
        }
        return styles
    },  
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 7) {
        return {
          rowspan: 3,
          colspan: 1,
        };
      }
    },
    init() {
      let levels = ['健康', '亚健康', '严重', '恶劣']
      

       let data = [
        {
          cellgroup: "1",
          健康: this.cell_group[0].健康[0],
          亚健康: this.cell_group[0].亚健康[0],
          严重:this.cell_group[0].严重[0],
          恶劣: this.cell_group[0].恶劣[0],
          等级: this.cell_group[0].等级[0],
          kstar: this.cell_group[0]['K*'][0],
          整体评估结果:  "亚健康",
        },
        {
          cellgroup: "2",
          健康: this.cell_group[1].健康[0],
          亚健康: this.cell_group[1].亚健康[0],
          严重:this.cell_group[1].严重[0],
          恶劣: this.cell_group[1].恶劣[0],
          等级: this.cell_group[1].等级[0],
          kstar: this.cell_group[1]['K*'][0],
          
        },
        {
          cellgroup: "3",
          健康: this.cell_group[2].健康[0],
          亚健康: this.cell_group[2].亚健康[0],
          严重:this.cell_group[2].严重[0],
          恶劣: this.cell_group[2].恶劣[0],
          等级: this.cell_group[2].等级[0],
          kstar: this.cell_group[2]['K*'][0],
        },
      ];
      let md = 0
      for(let i =0; i< data.length; i++) {
        let p = data[i]
        let m = p.健康
        let le = '健康'
        levels.forEach(l => {
          p[l] =  parseFloat(p[l].toFixed(3))
          if (m < p[l]) {
            le = l
            m = p[l]
          }
        })
        p.等级 = le
        if(levels.indexOf(le) > md) {
          md = levels.indexOf(le)
        }
        p.kstar =  parseFloat(p.kstar.toFixed(3))
      }
      data[0].整体评估结果 = levels[md]
      this.tableData = data
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
.dv-scroll-board .header {
  font-size: 26px;
}

.health-1 {
    color: green;
}
.health-2 {
    color: rgb(170, 36, 36);
}

.health-3 {
    color: rgb(240, 0, 0);
}

.health-4 {
    color: rgb(255, 5, 5);
}

.table-row{
    background-color: transparent  !important;
}

.table-cell {
    background-color: transparent  !important;

}

.table-header {
    background-color: transparent !important;
    height: 80px;
    line-height: 80px !important;
}
.table-header-cell {
    background-color: transparent !important;
    color:rgb(131,225,251);
    font-size: 30px;
    letter-spacing: 2px;
    height: 150px;
    overflow: none;
    line-height: 80px !important;
    text-align: center !important;
    border-top: 2px solid white;
    border-bottom: 2px solid white !important;
}
.el-table {
	border-radius: 20px;
}
.el-table .cell {
    line-height: 2.0 !important;
}
</style>